<template>
	<div class="banner">
		<el-carousel v-show="bannerType == 1" :arrow="'never'">
			<el-carousel-item v-for="(item, index) in bannerList" :key="index">
				<el-image class="b-img" fit="cover" :src="item + '?imageMogr2/thumbnail/1920x'" />
			</el-carousel-item>
		</el-carousel>

		<el-carousel v-show="bannerType == 2" :arrow="'never'" :autoplay="false" @change="changeVideo">
			<el-carousel-item v-for="(item, index) in videoList" :key="index">
				<video ref="vRef" :src="item"></video>
			</el-carousel-item>
		</el-carousel>

		<el-image class="seal" :src="cosPrefix + 'header/seal.png?imageMogr2/thumbnail/375x'" />

		<div v-if="breakPoint != 'xs'" class="tabs">
			<div class="tab" @click="pageJump(tab.path)" v-for="tab in menuList" :key="tab.path">{{ $t(`base.${tab.nameI18nKey}`) }}</div>
		</div>

		<div class="type">
			<el-image v-for="item in typeList" :key="item.value" @click="changeType(item.value)" :class="[{ active: bannerType == item.value }]" fit="cover" :src="item.img" />
		</div>
	</div>
</template>
<script setup lang="ts">
import { useVR } from "@/hook/useVR";
import { useBaseStore } from "@/store/base";
import { dynamicFontSize } from "@/utils/rem";
const { cosPrefix, menuList } = useBaseStore();
// 获取当前语言
const { language, breakPoint } = storeToRefs(useBaseStore());
// tab字体大小
const tabFontSize = computed(() => (language.value == "en" ? dynamicFontSize() + "px" : dynamicFontSize(24) + "px"));
// 当前视频索引
const currentVideoIndex = ref(0);

//banner类型
const bannerType = ref(1);
const vRef = ref();
const typeList = [
	{ label: "图片", value: 1, img: cosPrefix + "/header/i-image.svg" },
	{ label: "视频", value: 2, img: cosPrefix + "/header/i-video.svg" }
];
const changeType = (val: number) => {
	bannerType.value = val;
	val == 1 ? vRef.value[currentVideoIndex.value].pause() : vRef.value[currentVideoIndex.value].play();
};

/**
 * 切换视频
 * @param index 当前视频
 * @param prevIndex 上一个视频
 */
const changeVideo = (index: number, prevIndex: number) => {
	currentVideoIndex.value = index;

	// 暂停上一个视频
	vRef.value[prevIndex].pause();

	// 播放当前视频
	vRef.value[index].play();
};

//banner图列表
const bannerList = [
	"https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/header/b5.jpg",
	"https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/header/b1.png",
	"https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/header/b6.jpg",
	"https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/header/b2.jpg"
];
//banner视频列表
const videoList = [cosPrefix + "index.mp4", cosPrefix + "/header/V1.mp4", cosPrefix + "/header/V3.mp4", cosPrefix + "/header/V4.mp4"];

const { pageJump } = useVR();
</script>
<style lang="scss" scoped>
.banner {
	position: relative;
	height: 0;
	.b-img {
		width: 100%;
		height: 100%;
	}
	video {
		object-fit: cover;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}
	:deep(.el-carousel__indicators) {
		display: flex;
		justify-content: center;
		width: 100%;
		padding-bottom: 18px;
		.el-carousel__indicator {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			padding: 0;
			margin-right: 20px;
			background-color: transparent;
			border: 1px solid transparent;
			border-radius: 50%;
			&.is-active {
				border-color: $theme-color !important;
			}
			.el-carousel__button {
				width: 10px;
				height: 10px;
				background-color: $theme-color;
				border-radius: 50%;
			}
		}
	}
	.seal {
		position: absolute;
		right: 50px;
		bottom: 50px;
		width: 100px;
	}
	.tabs {
		position: absolute;
		top: 164px;
		left: 50px;
		.tab {
			display: flex;
			align-items: center;
			justify-content: start;
			width: 188px;
			height: 64px;
			padding-left: 20px;
			margin-bottom: 62px;
			font-family: SourceSerif;
			font-size: v-bind(tabFontSize);
			font-weight: bold;
			color: #ffffff;
			cursor: pointer;
			background-image: url("https://sms-1302634640.file.myqcloud.com/cloud-jingzhu/header/tab-bg.png?imageMogr2/thumbnail/375x");
			background-size: 100%;
			&:hover {
				background-image: url("https://sms-1302634640.file.myqcloud.com/cloud-jingzhu/header/tab-bg-active.png?imageMogr2/thumbnail/375x");
			}
		}
	}
	.type {
		position: absolute;
		bottom: 50px;
		left: 50px;
		.el-image {
			width: 60px;
			height: 60px;
			padding: 14px;
			margin-right: 20px;
			background-color: rgb(159 159 159 / 100%);
			border-radius: 50%;
			&.active {
				background-color: $theme-color;
			}
		}
	}
}
.el-carousel {
	position: absolute;
	inset: 0;

	// height: 100%;
	:deep(.el-carousel__container) {
		height: 100%;
	}
}
.tool-right {
	position: absolute;
	top: 50px;
	right: 50px;
}

@media all and (max-width: 750px) {
	.banner {
		position: relative;
		flex: none !important;
		height: 320px !important;
		.b-img {
			height: 320px;
		}
		.seal {
			right: 16px;
			bottom: 16px;
			width: 25px;
		}
		.type {
			bottom: 32px;
			left: 32px;
			.el-image {
				width: 28px;
				height: 28px;
				padding: 4px;
			}
		}
	}
	:deep(.el-carousel__indicators) {
		padding-bottom: 10px !important;
	}
}
</style>
